<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
		<title>大唐微科集团</title>
		<link rel="shortcut icon" href="assets/img/icon.png">
		<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="assets/css/main.css">
		<link rel="stylesheet" type="text/css" href="assets/css/green.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
		<link rel="stylesheet" href="assets/css/slicknav.css" />
		<link rel="stylesheet" href="assets/css/Element-ui.css" />
		<style type="text/css">
			#app{
				margin:auto;
				width:90%;
				margin-left:5%;
				float: left;
			}
			.bottom_color{
				width: 70%;
			    margin-left: 15%;
			    float: left;
			}
			.index_centent_p {
			    height: 100px;
			    -webkit-line-clamp: 4;
			}
			#team-all{
				padding-bottom:0;
			}
			.el-carousel__container img{
				display: block;
				width:100%;
			}
			#carousel-area i{
				margin-right: 0;
			}
			.foot_div {
			    margin-left: 12.5%;
			    width: 75%;
			}
			@media only screen and (min-width: 320px) and (max-width: 480px) {
				.el-pagination.is-background .el-pager li {
				    margin: 0 2px;
				}
				.el-carousel__indicator {
				    padding: 4px 7px;
				}
				.el-carousel__button{
					width:7px;
					height:7px;
				}
				.foot_div {
				    margin-left: 10%;
    				width: 80%;
				}
				.bottom_color{
					width:90%;
					margin-left:5%;
				}
			}
		</style>
	</head>

	<body>
		<header id="header-wrap"></header>
		<div id="app" v-cloak>
			<!--轮播图-->
			<!--<div class="banner_img">
				<img src="assets/img/banner_bg.png"/>
			</div>-->
			<div id="carousel-area" class="section index_banner">
				<div class="block">
				    <el-carousel  trigger="click" :interval='4000' :height="bannerHeight+'px'">
				      <el-carousel-item v-for='(items,index) in indexBannerImg' @click.native="linkTo(items)">
				        <img ref='bannerImg' :src="items.newsCover" @load="imgLoad(index)"/>
				      </el-carousel-item>
				    </el-carousel>
				</div>
			</div>
			<!--center-->
			<section id="team-all" class="section team-all">
				<!--集团简介-->
				<div class="team_index">
					<div class="index_left">
						<ul class="index_ul">
							<li class="index_li" v-for="(item,index) in indexleftInfo" @click="btnIndexList(item.id,index)" :class="{index_active_li:index == current}">{{item.classifiedsName.substring(2,6)}}</li>
						</ul>
						<p class="index_tit_p">{{indexCententInfo.newsTitle}}</p>
						<p class="index_centent_p" v-html="indexCententInfo.newsContent"></p>
						<button class="index_btn" @click="IndexBtn(indexCententInfo.classifiedId)">详情内容</button>
					</div>
					<div class="index_right">
						<div id="posiation_img"></div>
						<video :src="indexVideo" controls="controls" width="100%" height="100%" id="video" controlslist="nodownload  nofullscreen noremoteplayback" ></video>
						<div class="yourDiv" @click="play()" id="poster">
						  <img src="assets/img/enter.png">
						</div>
					</div>
				</div>
			</section>
			<!--底部边框颜色-->
			<div class="bottom_color">
				<div class="left_color"></div>
				<div class="right_color"></div>
			</div>
		</div>
		<script type="text/javascript" src="assets/js/jquery-min.js"></script>
		<script type="text/javascript" src="assets/js/conent.js"></script>
		<script type="text/javascript" src="assets/js/vue.js" ></script>
		<script type="text/javascript" src="assets/js/vue-resource.js" ></script>
		<script type="text/javascript" src="assets/js/Element-ui.js" ></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data(){
					return{
						bannerHeight:'',
						indexleftInfo:'',
						current : 0,
						count : 0,
						//banner图
						indexBannerImg : '',
						//首页视频
						indexVideo : '',
						//切换内容
						indexCententInfo : ''
					}
				},
				created(){
					this.indexInfo()
				},
				methods:{
					indexInfo(){
						var _this = this;
						this.$http.get(URL + 'chamberclassifies').then(function(obj){
							if(obj.body.code == 'success'){
								if(obj.body.data.classList.length > 0){
									_this.indexleftInfo = obj.body.data.classList;
								}
								//轮播图为空判断
								if(obj.body.data.firstBanner.length > 0){
									_this.indexBannerImg = obj.body.data.firstBanner;
								}else{
									
								}
								//视频判断
								if(obj.body.data.videoBanner != null){
									_this.indexVideo = obj.body.data.videoBanner;
									$("#posiation_img").css("background-image","url(assets/img/video.png)");
								}else{
									
								}
								_this.btnIndexList(obj.body.data.classList[0].id,this.current)
							}
						})
					},
					//集团简介、集团要闻、媒体动态   切换
					btnIndexList(id,index){
						var _this = this;
						this.$http.get(URL + 'chamberManage/' + id).then(function(data){
							_this.current = index;
							if(data.body.code == 'success'){
								_this.indexCententInfo = data.body.data.rows[0]
							}
						})
					},
					//集团简介、集团要闻、媒体动态  的点击事件
					IndexBtn(id){
						window.location.href = 'indexdetail.html?indexId=' + id
					},
					//轮播图高度
					imgLoad(index){
						this.count++;
						if(this.count === 1){
							if($(window).width() < 415){
								this.$nextTick(()=>{
									this.bannerHeight = this.$refs.bannerImg[index].height + 50;
									$('.el-carousel__container img').css('height','100%')
								})
							}else{
								this.$nextTick(()=>{
									this.bannerHeight = this.$refs.bannerImg[index].height;
									$('.el-carousel__container img').css('height','100%')
								})
							}
						}
					},
					//轮播图点击跳转详情
					linkTo (items) {
					  if(items.id == '2c92e85a723a5d0f01737a6378fc020e' && typeof items.newsIndexId == 'undefined'){
					  	this.$set(items,"newsIndexId",'2c92e85a723a5d0f01729c48cae40148')
						if(items.newsIndexId == '2c92e85a723a5d0f01729c48cae40148'){
							window.location.href = 'news_detail.html?newsdetailId=' + items.newsIndexId + '&detaliNum=' + 0 + '&detailNumClass' + '集团要闻'
						}
					  }
				    },
					//视频图标
					play(){
						$('#poster').css('display','none');
						$('#video').css('display','block');
						$("#posiation_img").hide();
						document.getElementById('video').play();
						var video = document.getElementById('video');
					}
				},
				mounted(){
					//监听轮播图的高度
					window.addEventListener('resize',()=>{
						this.bannerHeight = this.$refs.bannerImg[0].height;
					},false);
				}
			})
			setTimeout(function() {
				var wow = new WOW({
					mobile: false 
				});
				wow.init();
			},300)
		</script>
		<script type="text/javascript" src="assets/js/wow.js" ></script>
		<!--底部-->
		<footer id="footer"></footer>
		<a href="#" class="back-to-top">
			<i class="fa fa-angle-up">
				<span class="i_span"></span>
			</i>
		</a>
		<script type="text/javascript" src="assets/js/Top.js"></script>
	</body>

</html>